<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
    <title>OllamaLens - 本地AI模型会话客户端</title>
    <link href="tailwind.min.css" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
    <div class="container mx-auto p-4">
        <div class="mb-8 md:mb-10 space-y-2 border-b border-gray-200 pb-4">
            <div class="flex items-center gap-3">
                <h1 class="text-2xl md:text-3xl font-bold text-gray-800">
                    OllamaLens
                    <span class="text-sm md:text-lg font-normal text-gray-500 ml-2">
                        智能AI模型会话助手
                    </span>
                </h1>
    
            </div>
        
        </div>

        <div class="flex flex-col md:flex-row gap-4 md:gap-6 main-container">
            <!-- 左侧聊天区域 -->
            <div class="flex-1 input-panel">
                <div class="flex justify-between items-center mb-3 md:mb-4">
                    <h2 class="text-xl font-semibold text-gray-700">对话历史</h2>
                    <button class="clear-history-btn flex items-center text-sm text-gray-500 hover:text-gray-600 bg-white px-3 py-1.5 rounded-lg border border-gray-200 shadow-sm transition-all">
                        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                                  d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                        </svg>
                        清除历史
                    </button>
                </div>
                
                <!-- 聊天历史记录 -->
                <div class="bg-white rounded-lg shadow-lg p-3 md:p-4 mb-3 md:mb-4 chat-history">
                    <div class="relative h-full overflow-hidden flex flex-col">
                        <!-- 用户消息 -->
                        <div class="flex-1 overflow-y-auto space-y-3">
                            <div class="text-center py-8 welcome-message">
                                <div class="mb-4 inline-block rounded-full bg-blue-50 p-4">
                                    <svg class="w-12 h-12 md:w-16 md:h-16 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 
                                              d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"/>
                                    </svg>
                                </div>
                                <h3 class="text-gray-500 text-sm md:text-base font-medium">欢迎使用 OllamaLens</h3>
                                <p class="text-xs md:text-sm text-gray-400 mt-1">开始与AI模型对话吧！</p>
                                <p class="text-xs text-gray-400 mt-2">
                                    <span class="inline-block bg-gray-100 rounded px-2 py-1 text-gray-500">Ctrl+Enter</span> 
                                    快速发送消息
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 输入区域 -->
                <div class="bg-white rounded-lg shadow p-4">
                    <div class="mb-2">
                        <span class="text-sm text-gray-500">支持文本和图片问答（Ctrl+Enter发送）</span>
                    </div>
                    <textarea 
                        class="w-full p-3 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" 
                        rows="4"
                        style="min-height: 100px; max-height: 300px; resize: vertical"
                        placeholder="请输入问题或指令..."></textarea>

                    <!-- 操作按钮区域 -->
                    <div class="mt-3 flex flex-col md:flex-row justify-between items-start md:items-center gap-2">
                        <!-- 上传图片按钮 -->
                        <div class="flex flex-col md:flex-row items-start md:items-center gap-2 w-full md:w-auto">
                            <div class="relative">
                                <input type="file" accept="image/*" class="opacity-0 absolute w-full h-full cursor-pointer">
                                <div class="preview-container"></div>
                                <button class="flex items-center text-sm text-blue-600 hover:text-blue-700 transition-colors">
                                    <svg class="w-5 h-5 mr-2 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                                              d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                                    </svg>
                                    上传图片
                                    <span class="ml-2 text-sm text-gray-500">最多5张</span>
                                </button>
                            </div>
                        </div>

                        <!-- 发送按钮 -->
                        <button class="w-full md:w-auto bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 md:py-2.5 md:px-7 rounded-lg transition-all active:scale-95 shadow-sm md:ml-auto send-button">
                            <span class="relative top-px">发送</span>
                        </button>
                    </div>
                </div>

                <!-- 对话设置区域 -->
                <div class="bg-white rounded-lg shadow p-4 mt-4">
                    <h3 class="text-lg font-semibold text-gray-700 mb-3">对话设置</h3>
                    <div class="space-y-4">
                        <div class="flex items-center space-x-2">
                            <div class="relative inline-block w-10 mr-2 align-middle select-none">
                                <input type="checkbox" id="historyToggle" checked
                                    class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-2 border-gray-300 appearance-none cursor-pointer transition-transform"
                                    style="transform: translateX(0);"/>
                                <label for="historyToggle" 
                                    class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
                            </div>
                            <label for="historyToggle" class="text-sm text-gray-700">使用历史上下文</label>
                        </div>
                        <div class="hidden">
                            <label class="inline-flex items-center">
                                <input type="checkbox" class="form-checkbox h-5 w-5 text-blue-600" name="formatOutput">
                                <span class="ml-2">格式化输出</span>
                            </label>
                        </div>
                        <div class="hidden">
                            <label class="inline-flex items-center">
                                <input type="checkbox" class="form-checkbox h-5 w-5 text-blue-600" name="streamOutput">
                                <span class="ml-2">流式输出</span>
                            </label>
                        </div>
                        <div class="pt-4 border-t border-gray-100">
                            <div class="flex items-center justify-between mb-2">
                                <label class="text-sm font-medium">上下文保留策略</label>
                                <span class="text-xs text-gray-500" id="historyLengthDisplay">5 轮</span>
                            </div>
                            <input type="range" min="1" max="50" value="5" 
                                   class="w-full range-sm" name="historyLength"
                                   oninput="document.getElementById('historyLengthDisplay').textContent = this.value + ' 轮'">
                            <div class="text-xs text-gray-500 mt-1">设置保留的历史对话轮数（0表示不保留）</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 右侧配置区域 -->
            <div class="w-full md:w-80 config-panel">
                <div class="bg-white rounded-xl shadow-lg p-3 md:p-5">
                    <div class="flex justify-between items-center mb-3 md:mb-5">
                        <h2 class="text-lg md:text-xl font-semibold text-gray-700">模型配置</h2>
                        <button class="reset-defaults-btn flex items-center text-sm text-gray-500 hover:text-red-600 transition-colors"
                                title="恢复所有设置为默认值">
                            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                                      d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
                            </svg>
                            恢复默认
                        </button>
                    </div>
                    
                    <!-- 连接设置 -->
                    <div class="mb-6 space-y-4">
                        <h3 class="text-sm font-semibold text-gray-600 tracking-wide uppercase mb-3">服务器设置</h3>
                        <div class="space-y-4">
                            <div class="relative">
                                <label class="block text-sm font-medium mb-1">
                                    Ollama 服务器
                                    <span class="text-red-500">*</span>
                                </label>
                                <div class="relative">
                                    <input 
                                        type="text" 
                                        id="ollamaUrl"
                                        class="w-full p-2 border rounded-lg pr-12" 
                                        placeholder="例如：http://localhost:11434"
                                        value="http://localhost:11434"
                                        required
                                        oninput="toggleClearButton(this)"
                                        onblur="restoreDefault(this)">
                                    <button 
                                        class="absolute right-3 top-1/2 -translate-y-1/2 opacity-0 transition-opacity duration-200 hover:text-red-600" 
                                        onclick="clearOllamaUrl()"
                                        id="clearUrlBtn">
                                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                                        </svg>
                                    </button>
                                </div>
                            </div>
                            <div class="relative">
                                <label class="block text-sm font-medium mb-1">模型</label>
                                <div class="flex gap-2">
                                    <select id="modelSelect" class="w-full p-2 border rounded-lg">
                                        <!-- 动态填充选项 -->
                                    </select>
                                    <button 
                                        class="px-3 py-2 bg-blue-100 hover:bg-blue-200 text-blue-600 rounded-lg transition-colors"
                                        title="刷新模型列表"
                                        onclick="fetchModels()">
                                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                                                d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
                                        </svg>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 生成参数 -->
                    <div class="border-t border-gray-100 pt-6 mb-6">
                        <h3 class="text-sm font-semibold text-gray-600 tracking-wide uppercase mb-4">生成控制</h3>
                        <div class="space-y-5">
                            <div>
                                <div class="flex justify-between items-center mb-1">
                                    <label class="block text-sm font-medium">随机程度 (Temperature)</label>
                                    <span class="text-xs text-gray-500" id="temperatureValue">0.70</span>
                                </div>
                                <input type="range" min="0" max="100" value="70" 
                                       class="w-full range-sm" name="temperature"
                                       oninput="document.getElementById('temperatureValue').textContent = (this.value/100).toFixed(2)">
                                <div class="text-xs text-gray-500 mt-1">
                                    控制输出随机性 (0.0-1.0)<br>
                                    • 较低值更确定 (如0.2适合事实问答)<br>
                                    • 较高值更创意 (如0.8适合故事生成)
                                </div>
                            </div>
                            <div>
                                <div class="flex justify-between items-center mb-1">
                                    <label class="block text-sm font-medium">Top P (核采样)</label>
                                    <span class="text-xs text-gray-500" id="topPValue">0.90</span>
                                </div>
                                <input type="range" min="0" max="100" value="90" 
                                       class="w-full range-sm" name="topP"
                                       oninput="document.getElementById('topPValue').textContent = (this.value/100).toFixed(2)">
                                <div class="text-xs text-gray-500 mt-1">
                                    控制候选词范围 (0.0-1.0)<br>
                                    • 较低值更聚焦 (如0.5保留前50%概率的词)<br>
                                    • 较高值更多样 (如0.9保留前90%概率的词)
                                </div>
                            </div>
                            <div>
                                <label class="block text-sm font-medium mb-1">Top K</label>
                                <input type="number" class="w-full p-2 border rounded-lg" 
                                       value="40" min="1" max="100" step="1" name="topK">
                                <div class="text-xs text-gray-500 mt-1">每次生成时考虑的词数</div>
                            </div>
                            <div>
                                <label class="block text-sm font-medium mb-1">Repeat Penalty</label>
                                <input type="number" class="w-full p-2 border rounded-lg" 
                                       value="1.1" min="1.0" max="2.0" step="0.1" name="repeatPenalty">
                                <div class="text-xs text-gray-500 mt-1">防止重复生成的惩罚系数</div>
                            </div>
                            <div>
                                <label class="block text-sm font-medium mb-1">上下文长度 (tokens)</label>
                                <input type="number" class="w-full p-2 border rounded-lg" 
                                       value="4096" min="512" max="16384" step="512" name="contextLength">
                                <div class="text-xs text-gray-500 mt-1">控制模型记忆长度（建议值：2048-8192）</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="axios.min.js"></script>
    <script src="lib.js"></script>
</body>
</html> 